<!--
 * @Description: 
 * @Author: ljl
 * @Date: 2024-11-13 15:19:07
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-13 19:22:50
-->
<!-- 页面结构 -->
<template>
    <div :style="{'font-size':fontSize + 'px'}">
        <!-- num:{{ num }} -->
        count:{{ count }}
        <button @click="count++">count++</button>
        <button @click="childAddFont">fontSize++</button>
        <button @click="childReduceFont">fontSize--</button>
    </div>
</template>
<!-- js -->
<script setup>
import { ref } from 'vue';
const count = ref(0);
const fontSize = ref(20);
const props = defineProps(['num']);
count.value = props.num;
function childAddFont() {
    fontSize.value++;
}
// 暴露方法给父组件
defineExpose({ childAddFont,childReduceFont });
function childReduceFont() {
    fontSize.value--;
}

</script>
<!-- 样式 -->
<!-- scoped是为了当前组件不影响其他组件 -->
<style scoped>

</style>